<template>
    <div class="container">
        <div class="app col-md-12" style="background: #fff; padding:10px ; border-radius: 5px; margin-top:30px">
            <el-button @click="addUse()" type="text" size="small">添加用户</el-button>
            <template>
                <el-row>
                    <el-col :span="4">
                        <el-input placeholder="用户名" v-model="devname"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <template>
                            <el-select v-model="category" placeholder="类别">
                                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-col>
                    <!-- 时间日期组件 -->
                    <el-col :span="9">
                        <template>
                            <div class="block">
                                <el-date-picker v-model="timer" type="datetimerange" start-placeholder="开始时间"
                                    end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </div>
                        </template>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryDev">查询</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="emptyDev">清空</el-button>
                    </el-col>
                </el-row>
            </template>
            <template>
                <el-table :data="tableData" style="width: 100% ; margin-top:20px" height="500">
                    <div v-for="(item, index) in column" :key="index">
                        <!-- <el-table-column :prop="column1[index]" :label='item'></el-table-column> -->
                        <el-table-column v-if="column1[index]!== 'isApp'" :prop="column1[index]" :label='item'></el-table-column>
                        <el-table-column v-else :prop="column1[index]" :label="item" width="180">
                            <template slot-scope="isApp">
                                <span v-show="isApp.row.isApp == true">推送</span>
                                <span v-show="isApp.row.isApp == false">未推送</span>
                            </template>
                        </el-table-column>
                    </div>
                    <!-- <el-table-column fixed="right" label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button @click="changePsw(scope.row)" type="text" size="small">修改密码</el-button>
                            <el-button @click="replaceDev(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click.native.prevent="deleteRow(scope, tableData)" type="text"
                                size="small">移除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="tota">
                </el-pagination>
            </template>
            <usePop :params="params" :usetitle="addTitle" :showHide="showHide" @custom-event="devHidden"></usePop>
        </div>
    </div>
</template>
  
<script>
import { getData } from '@/api/table'
import { Message } from 'element-ui'
import usePop from '@/components/public/usePop.vue'

export default {
    // 组件
    components: {
        usePop,
    },
    props: {
        column: {
            type: Array,
            required: true
        },
        column1: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            // 获取用户信息
            getUsers(data) {
                getData('/user/list', data).then(res => {
                    this.tableData = res.msg
                    this.tota = res.total
                })
            },
            // 查询名字字段
            option: [{
                value: '1',
                label: '家用'
            }, {
                value: '2',
                label: '商用'
            },],
            timer: '',
            devname: '',

            tableData: [],

            // 默认每页显示的条数（可修改）
            PageSize: 10,

            // 默认显示第一条
            currentPage: 1,

            // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount: 1,

            dialogTableVisible: false,
            // 组件显示隐藏
            showHide: false,
            // 传递给组件的信息
            params: {
                "addTime": '',//创建时间
                "isApp": '',//推送app
                "isPhone": '',//拨打电话
                "isSms": '',//发送短信
                "overdueDate": '',//过期时间
                "pwd": "",//密码
                "roleId": "",//角色
                "userId": "",//用户ID
                "userName": ""//用户名
            },
            // 弹窗添加的标头
            addTitle: {
                'title': '修改用户信息',
                "addTime": '创建时间',//创建事件
                "isApp": '推送app',//推送app
                "isPhone": '拨打电话',//拨打电话
                "isSms": '发送短信',//发送短信
                "overdueDate": '过期时间',//过期时间
                "pwd": "密码",//密码
                "roleId": "角色",//角色
                "userId": "用户ID",//用户ID
                "userName": "用户名"
            },
            formLabelWidth: '120px',
            // 总条数
            tota: 0,
            // 类别
            category: '',
            state: ''
        }
    },

    methods: {
        judge(item) {
            console.log(item);
            return item;
        },
        //修改密码
        changePsw(row) {
            this.showHide = true;
            this.addTitle.title = '修改密码'
            this.params = row
        },
        // 添加用户信息
        addUse() {
            this.showHide = true;
            this.addTitle.title = '添加用户'
        },
        //修改用户信息
        replaceDev(prop) {
            this.showHide = true;
            this.params = prop
            this.addTitle.title = '修改用户信息'
        },
        // 删除用户
        deleteRow(scops, rows) {
            rows.splice(scops.$index, 1);
            let data = { userId: scops.row.userId }
            getData('/role/remove', 'post', data).then(res => {
                Message({
                    message: res.msg,
                    type: 'success',
                    duration: 3 * 1000
                })
            })
        },
        // 查询表单条数
        handleSizeChange(val) {
            this.PageSize = val
            let data = { limit: val, offset: this.currentPage - 1, search: this.devname }
            getData('/user/list', 'get', data).then(res => {
                this.tableData = res.msg
                this.tota = res.total
            })
        },
        // 查询表单页数
        handleCurrentChange(val) {
            this.currentPage = val
            let data = { limit: this.PageSize, offset: this.PageSize * (this.currentPage - 1), search: this.devname }
            getData('/user/list', 'get', data).then(res => {
                this.tableData = res.msg
                this.tota = res.total
            })
        },

        // 组件穿过来对话框是否显示
        devHidden(data) {
            this.showHide = data
            this.params = {
                "addTime": '',//创建时间
                "isApp": '',//推送app
                "isPhone": '',//拨打电话
                "isSms": '',//发送短信
                "overdueDate": '',//过期时间
                "pwd": "",//密码
                "roleId": "",//角色
                "userId": "",//用户ID
                "userName": ""//用户名
            }
        },
        //查询用户
        queryDev() {
            // this.devname; 输入框输入的内容
            let data = { search: this.devname }
            getData('/user/list', 'get', data).then(res => {
                this.tableData = res.msg
                this.tota = res.total
            })
        },
        // 清空查询
        emptyDev() {
            this.devname = ''
            getData('/user/list', 'get').then(res => {
                this.tableData = res.msg
                this.tota = res.total
            })
        }
    },
    created() {
        // console.log(this.column1);
        // 获取用户列表
        getData('/user/list', 'get').then(res => {
            this.tableData = res.msg
            this.tota = res.total
            // console.log(this.tableData);
        })
    },

}
</script>
<style>
.el-table--fit {
    border: 1px solid #e2e2e2;
}

@media (min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1200px;
    }
}

input:focus {
    border-bottom: 1px solid #007bff;
    outline: 1px solid #007bff;
    /*border-color: #007bff; 移除默认的蓝色轮廓线 */
}

.el-dialog {
    width: 40% !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border: 1px solid #EBEEF5;
}
</style>
  